<!-- 教师注册成功界面 -->

<template>
  <div style="padding: 100px">
    <el-result icon="success" title="注册成功！">
      <template slot="extra">
        <p style="text-align: center;font-size: 15px;"><span id="time" style="color: red;">{{ countDown }}</span>秒后返回至<i style="text-shadow: 2px 2px 1px #00ffc1;margin-right: 5px">教师</i>登录页面&nbsp;.&nbsp;.&nbsp;.
        </p>
        <el-button type="primary" size="medium" @click="$router.push('/TeaLogin')">立即登录</el-button>
      </template>
    </el-result>
  </div>
</template>

<script>
export default {
  name: "TeaRegisterSuccess",
  data() {
    return {
      countDown: 0, // 页面上显示的倒计时数字
      timerThree: null, // 倒计时的对象

    }
  },
  created() {
    this.countDownFunc()
  },
  methods: {
    countDownFunc(){
      const TIME_COUNT = 5;  // 5s的倒计时变量
      if(!this.timerThree){ // 没有倒计时在执行
        this.countDown = TIME_COUNT;
        this.timerThree = setInterval(()=>{
          if(this.countDown > 0 && this.countDown <= TIME_COUNT){
            this.countDown--;
          } else {
            clearInterval(this.timerThree); // 停止循环执行
            this.timerThree = null;  // 倒计时对象置为null
            // 页面跳转
            this.$router.push("/TeaLogin")
          }
        },1000)  // 1s执行一次
      }
    }
  }
}
</script>

<style>
.el-result__extra {
  margin-top: 0;
}
</style>